<template>
  <div class="about">
    <h1>offset的弊端:offsetWidth这样的offset属性一般不是改盒子的真实宽度，还包含padding、border</h1>
    <div id="box" ref="box"></div>
  </div>
</template>
<script>
import funs from "../../utils/animationUtil.js";

export default {
  name: "test",
  mounted() {
    let box = this.$refs.box;
    this.move(box);
  },
  methods: {
    move(obj) {
      setInterval(function() {
        obj.style.width = parseInt(funs.getStyle(obj, "width")) - 1 + "px";
      }, 30);
    }
  }
};
</script>
<style scoped>
#box {
  width: 200px;
  height: 200px;
  background: red;
  border: 1px solid #333;
}
h1 {
  color: red;
}
</style>
